<div ng-if="!(visibleDeploymentsByConfig | hashSize) && !(monopodsByService[service.metadata.name] | hashSize)" class="no-deployments-block">
  <div column class="no-deployments-message">
    <div class="pad-left-lg pad-right-lg pad-top-lg pad-bottom-lg">
      <h2>No deployments.</h2>
      <p>
        There are no deployments or pods for service
        <a ng-href="{{service | navigateResourceURL}}">{{service.metadata.name}}</a>.
      </p>
    </div>
  </div>
</div>

<div ng-attr-row="{{!service ? '' : undefined}}"
     ng-attr-wrap="{{!service ? '' : undefined}}"
     class="deployment-block"
     ng-class="{
       'no-service': !service,
       'service-multiple-targets': (rcTileCount + (monopodsByService[service.metadata.name] | hashSize) > 1)
     }">
  <div ng-repeat="(dcName, deployments) in visibleDeploymentsByConfig" class="deployment-tile-wrapper">
    <!-- visible deployments with a dc -->
    <overview-deployment-config ng-if="dcName"></overview-deployment-config>
    <!-- /visible deployments with a dc -->

    <!-- visible deployments without a dc -->
    <div class="deployment-tile-wrapper" ng-if="!dcName.length" ng-repeat="deployment in deployments | orderObjectsByDate : true track by (deployment | uid)">
      <overview-replication-controller></overview-replication-controller>
    </div>
  </div>
  <!-- monopods -->
  <div ng-repeat="pod in monopodsByService[service.metadata.name || ''] | orderObjectsByDate : true track by (pod | uid)"
      class="deployment-tile-wrapper">
    <overview-pod></overview-pod>
  </div>
  <!-- /monopods -->
</div>
